<template>
	<div class='content-box'>
		<div class='sub-module-title'>订单概要</div>
		<table class='table'>
			<tr>
				<td>充电桩：{{order.device_no}}#1插座</td>
				<td colspan='2'>充电状态：
					<span v-if='order.status == 1' class='color-67c23a'>充电中</span>
					<span v-else>已结束</span>
				</td>
			</tr>
			<tr>
				<td>订单编号：{{order.order_no}}</td>
				<td colspan='2'>微信交易号：{{order.trade_no}}</td>
			</tr>
			<tr>
				<td>计费方式：{{order.charge_type | chargeType}}</td>
				<td colspan='2'>计费单位：{{order.charge_unit}} {{order.charge_type == 1 ? '分钟' : '度'}}</td>
			</tr>
			<tr>
				<td>开始时间： {{order.start_time | parseTime}}</td>
				<td colspan='2'>结束时间： {{order.end_time | parseTime}}</td>
			</tr>
			<tr>
				<td>预付款： {{order.amount}} 元</td>
				<td colspan='2' v-if='order.charge_type == 1'>预设时长： {{order.charge_quantity | formatChargeTime}}</td>
				<td colspan='2' v-if>预设度数： {{order.charge_quantity}} 度</td>
			</tr>
			<template v-if='order.status == 2'>
				<tr>
					<td>实际充电时长： {{order.consume_time | formatChargeTime}}</td>
					<td colspan='2'>实际充电电量： {{order.consume_energy}} 度</td>
				</tr>
				<tr>
					<td>退款金额： {{order.refund_amount}} 元</td>
					<td colspan='2'>实际付款： {{order.consume_amount}} 元</td>
				</tr>
			</template>
			<tr v-if='order.status == 1'>
				<td>当前功率： {{order.power}} W</td>
				<td colspan='2' v-if='order.charge_type == 1'>已充时长： {{(order.charge_quantity - order.surplus_time) | formatChargeTime}}</td>
				<td colspan='2' v-else>已充电量： {{order.charge_quantity - order.surplus_energy}} 度</td>
			</tr>
			<tr v-else='order.status == 2'>
				<td>平均功率： {{order.avg_power}} W</td>
				<td colspan='2'>最大功率： {{order.max_power}} W</td>
			</tr>
			<tr>
				<td>代理商： {{order.agent_name || ''}}</td>
				<td>门店： {{order.store_name || ''}}</td>
				<td>门店分成比： {{order.profit_rate}}%</td>
			</tr>
			<template v-if='order.status == 2'>
				<tr>
					<td>代理商分成： {{order.store_profit || 0}}元</td>
					<td colspan='2'>门店分成： {{order.store_profit || 0}} 元</td>
				</tr>
				<tr>
					<td colspan='3' class='color-f56c6c'>结束原因：{{order.stop_reason | stopChargeReason}}</td>
				</tr>
			</template>
		</table>
		
		<div class='m-t-20' v-if='extendOrderList.length > 0'>
			<div class='sub-module-title'>延迟充电</div>
			<el-table class='f-12' ref='multipleTable' :data='extendOrderList'>
				<el-table-column label='订单号' align='center'>
					<template slot-scope='scope'>{{ scope.row.order_no }}</template>
				</el-table-column>
				<el-table-column :label='order.charge_type == 1 ? "时长" : "度数"' align='center'>
					<template slot-scope='scope'>
						<span v-if='order.charge_type == 1'>{{ scope.row.extend_quantity | formatChargeTime }}</span>
						<span v-else>{{ scope.row.extend_quantity }} 度</span>
					</template>
				</el-table-column>
				<el-table-column label='金额' align='center'>
					<template slot-scope='scope'>{{ scope.row.amount }}</template>
				</el-table-column>
				<el-table-column label='时间' align='center'>
					<template slot-scope='scope'>{{ scope.row.create_time | parseTime }}</template>
				</el-table-column>
			</el-table>
		</div>
		
	</div>
	
</template>

<script>
	import { Request, successToast, errorToast, getUserRole } from '@/utils'
	let request = new Request()
	export default {
		data() {
			return {
				role : 0,
				order : {},
				extendOrderList : []
			}
		},
		
		methods : {
			goBack () {
				
			}
		},
		
		created () {
			let orderId = this.$route.params.orderId
			request.get('ChargeOrder/orderDetail', res => {
				if(res.success) {
					this.order = res.data.order
					if(res.data.extendOrder.length > 0) {
						this.extendOrderList = res.data.extendOrder
					}
				}else {
					errorToast(res.msg, this)
				}
			}, {orderId : orderId}),
			
			this.role = getUserRole()
		}
	}
</script>